import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link
} from "react-router-dom"
import top from "../top/top";
import list from "../boor/list";
import  './top.css'
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;

function App() {
  return (
    <Router>
      <div>
        <Layout>
        <Header className="lwq-header">
          <div className="lwq-logo" />
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['2']}
            style={{ lineHeight: '64px' }}
          >
            <Menu.Item key="1">nav 1</Menu.Item>
            <Menu.Item key="2">nav 2</Menu.Item>
            <Menu.Item key="3">nav 3</Menu.Item>
          </Menu>
        </Header>
        <Content style={{ padding: '0 50px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>首页</Breadcrumb.Item>
            <Breadcrumb.Item>数据管理</Breadcrumb.Item>
            <Breadcrumb.Item>商家列表</Breadcrumb.Item>
          </Breadcrumb>
          <Layout style={{ padding: '24px 0', background: '#fff' }}>
            <Sider width={200} style={{ background: '#fff' }}>
              <Menu
                mode="inline"
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                style={{ height: '100%' }}
              >
                <SubMenu
                  key="sub1"
                  title={
                    <span>
                      <Icon type="user" />
                      数据管理
                    </span>
                  }
                >
                    <Menu.Item key="1">
                      < Icon type = "pie-chart" / >
                      <span><Link to="/" >新闻管理</Link></span>
                    </Menu.Item>
                    <Menu.Item key="2">
                      < Icon type = "pie-chart" / >
                      <span><Link to="/list" >商家管理</Link></span>
                    </Menu.Item>
                  <Menu.Item key="3">食品列表</Menu.Item>
                  <Menu.Item key="4">订单列表</Menu.Item>
                </SubMenu>
                <SubMenu
                  key="sub2"
                  title={
                    <span>
                      <Icon type="laptop" />
                      添加数据
                    </span>
                  }
                >
                  <Menu.Item key="5">option5</Menu.Item>
                  <Menu.Item key="6">option6</Menu.Item>
                  <Menu.Item key="7">option7</Menu.Item>
                  <Menu.Item key="8">option8</Menu.Item>
                </SubMenu>
                <SubMenu
                  key="sub3"
                  title={
                    <span>
                      <Icon type="notification" />
                      图表
                    </span>
                  }
                >
                  <Menu.Item key="9">option9</Menu.Item>
                  <Menu.Item key="10">option10</Menu.Item>
                  <Menu.Item key="11">option11</Menu.Item>
                  <Menu.Item key="12">option12</Menu.Item>
                </SubMenu>
              </Menu>
              </Sider>
               <Header style={{ background: '#fff', padding: 0 }} ></Header>
              <Content style={{ padding: '0 16px', minHeight: 280 }}>
                <Route path='/' exact component={top} />
                <Route path='/list'  component={list}/>
              </Content>
          </Layout>
        </Content>
        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>,
      </div>
    </Router>
  );
}
export default App;
